<template>
  <div class="create-order">
    <van-nav-bar
      title="提交订单"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <!-- 课程信息 -->
    <div class="course-info">
      <van-card
        v-if="course"
        :price="course.price"
        :title="course.title"
        :desc="course.description"
        :thumb="course.cover"
      />
    </div>

    <!-- 订单信息 -->
    <van-cell-group inset class="order-info">
      <van-cell title="订单金额">
        <template #right-icon>
          <span class="price">¥{{ course?.price || 0 }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 支付方式 -->
    <van-cell-group inset title="支付方式" class="payment-method">
      <van-radio-group v-model="paymentMethod">
        <van-cell>
          <template #title>
            <div class="payment-option">
              <van-image
                width="24"
                height="24"
                src="https://img.yzcdn.cn/vant/logo.png"
              />
              <span class="payment-name">微信支付</span>
            </div>
          </template>
          <template #right-icon>
            <van-radio name="wechat" />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <div class="payment-option">
              <van-image
                width="24"
                height="24"
                src="https://img.yzcdn.cn/vant/logo.png"
              />
              <span class="payment-name">支付宝</span>
            </div>
          </template>
          <template #right-icon>
            <van-radio name="alipay" />
          </template>
        </van-cell>
      </van-radio-group>
    </van-cell-group>

    <!-- 提交按钮 -->
    <div class="submit-bar">
      <van-submit-bar
        :price="(course?.price || 0) * 100"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  showToast,
  Radio,
  RadioGroup,
  SubmitBar,
  Card,
  CellGroup,
  Cell,
  Image,
  NavBar
} from 'vant'

const route = useRoute()
const router = useRouter()

// 课程信息
const course = ref(null)
// 支付方式
const paymentMethod = ref('wechat')

// 获取课程信息
const fetchCourseInfo = async () => {
  try {
    // TODO: 从后端获取课程信息
    course.value = {
      id: route.query.courseId,
      title: '示例课程',
      description: '课程描述',
      price: 99.99,
      cover: 'https://img.yzcdn.cn/vant/logo.png'
    }
  } catch (error) {
    showToast('获取课程信息失败')
    console.error(error)
  }
}

// 提交订单
const onSubmit = async () => {
  try {
    // TODO: 提交订单到后端
    const orderData = {
      courseId: course.value.id,
      paymentMethod: paymentMethod.value,
      amount: course.value.price
    }
    console.log('提交订单:', orderData)
    
    // 模拟订单创建成功
    const orderId = 'ORDER' + Date.now()
    showToast('订单创建成功')
    // 跳转到支付页面
    router.push({
      name: 'payment',
      params: { orderId }
    })
  } catch (error) {
    showToast('订单提交失败')
    console.error(error)
  }
}

const onClickLeft = () => {
  router.back()
}

onMounted(() => {
  if (route.query.courseId) {
    fetchCourseInfo()
  } else {
    showToast('缺少课程信息')
    router.back()
  }
})
</script>

<style lang="scss" scoped>
.create-order {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 120px;

  .course-info {
    margin: 12px 0;
    background-color: #fff;
  }

  .order-info,
  .payment-method {
    margin: 12px 0;
  }

  .payment-option {
    display: flex;
    align-items: center;
    gap: 8px;

    .payment-name {
      font-size: 14px;
    }
  }

  .price {
    color: #ee0a24;
    font-weight: 500;
  }

  .submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

    :deep(.van-submit-bar) {
      box-shadow: none;
    }

    :deep(.van-submit-bar__bar) {
      height: 80px;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    :deep(.van-submit-bar__text) {
      font-size: 14px;
    }

    :deep(.van-submit-bar__button) {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      width: 120px;
    }
  }
}
</style>
